<template>
	<view class="container">
		<!-- 订单详情 -->
		<u-navbar leftIcon="arrow-left" @leftClick="back" :title="typeList[type]+'订单'" bg-color="#00000000"
			titleStyle="color:#fff" leftIconColor="#fff" placeholder></u-navbar>

		<view class="content">
			<!-- 背景 -->
			<view class="top-bg"></view>

			<view class="main">
				<view class="tab-content">
					<view class="list" v-if="state[2]">
						<view class="verification">
							<text class="title">核销码：</text>
							<text class="text">WE343235V</text>
							<view class="image">
								<uqrcode ref="uqrcode" canvas-id="qrcode" value="https://uqrcode.cn/doc"
									:options="{  }" size="80"></uqrcode>
							</view>
							<!-- <image src="../../../static/logo.png" mode=""></image> -->
						</view>
					</view>
					<view class="list">
						<view class="top">
							<text class="title">订单信息</text>
							<text class="title-state">{{this.typeList[type]}}</text>
						</view>
						<view class="line"></view>
						<view>
							<text class="name">订单号：124225665555842</text>
						</view>
						<view>
							<text class="name">服务项目：车辆保养</text>
						</view>
						<view>
							<view class="name">服务门店：大宝车辆维修店<image src="../../../static/images/myorder-plane.png">
								</image>
							</view>
						</view>
						<view>
							<text class="name">下单时间：2023-03-8 12:09</text>
						</view>
						<view>
							<text class="name">预约时间：2023-03-9 12:09</text>
						</view>
						<view>
							<text class="name">车辆：奔驰FWE4/豫A98FHJ</text>
						</view>
						<view>
							<text class="name">备注：</text>
						</view>
					</view>

					<view class="list">
						<view class="top">
							<text class="title">订单详情</text>
						</view>
						<view class="line"></view>
						<view>
							<text class="name">车辆精洗</text>
							<text>￥39.90</text>
						</view>
						<view>
							<view class="name">车辆附加费用</view>
							<text>0</text>
						</view>
						<view class="line"></view>
						<view>
							<text class="name">原价</text>
							<text>￥59.90</text>
						</view>
						<view>
							<text class="name">店家优惠</text>
							<text class="red">-￥20</text>
						</view>
						<view class="line"></view>
						<view>
							<text class="name">优惠券</text>
							<text class="red">-￥10</text>
						</view>
						<view class="line"></view>
						<view>
							<text class="name">支付金额</text>
							<text class="green">￥29.90</text>
						</view>
					</view>
					<view class="list" v-if="state[4]">
						<view class="top">
							<text class="title">评价结果</text>
						</view>
						<view class="line"></view>
						<view>
							<text class="name">评价时间：2022-10-10 11:09</text>
						</view>
						<view>
							<text class="name">评价结果：⭐⭐⭐⭐⭐</text>
						</view>
						<view>
							<text class="name">评语：评语评语评语评语评语评语</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 底部 -->
			<view class="page-bottom">
				<view class="left">
					<image src="../../../static/images/orderDetail-icon1.png" mode=""></image>
					<text>联系客服</text>
				</view>
				<view class="right">
					<block v-if="state[1]||state[3]">
						<button style="margin-right: 20rpx;" class="grey" @click="toEvaluate">{{this.btnText1}}</button>
					</block>
					<button :class="this.state[2]?grey:blue" @click="popup">{{this.btnText2}}</button>
				</view>
			</view>

			<!-- 弹出框(取消订单、申请退款) -->
			<u-modal :show="show" :title="title" :content='content' :showCancelButton="true" @confirm="confirm"
				@cancel="cancel"></u-modal>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				typeList: ['', '待支付', '待使用', '待评价', '已完成', '已取消', '已退款'],
				state: [false, false, false, false, false, false, true],
				type: '6',
				btnText1: '',
				btnText2: '',
				grey: 'grey',
				blue: 'blue',
				// 弹窗
				show: false,
				title: '提示',
				content: ''
			};
		},
		onLoad(option) {
			// console.log(option)
			//根据传过来的参数显示相应内容
			this.type = option.type;
			// 更新state
			this.state.forEach((value, index, arr) => {
				if (this.type == index) {
					arr[index] = true;
				} else {
					arr[index] = false;
				}
			})
		},
		mounted() {
			//bnt1
			if (this.state[1]) {
				this.btnText1 = '取消订单';
			} else if (this.state[3]) {
				this.btnText1 = '立即评价';
			};
			//btn2
			if (this.state[1]) {
				this.btnText2 = '立即支付';
			} else if (this.state[2]) {
				this.btnText2 = '申请退款';
			} else {
				this.btnText2 = '再来一单';
			}
		},
		methods: {
			// 返回我的页面
			back() {
				uni.navigateBack({});
			},
			//btn1跳转
			toEvaluate() {
				if (this.state[3]) {
					uni.navigateTo({
						url: './Evaluate' //跳转立即评价
					})
				} else {
					this.show = true;
					this.content = '确定要取消该订单吗？';
				}
			},
			popup() {
				if (this.state[2]) {
					this.show = true;
					this.content = '退款后将原路返回到支付账户,请确认是否退款!';
				}
			},
			confirm() {
				this.show = false;
			},
			cancel() {
				this.show = false;
			}
		}
	}
</script>

<style lang="scss">
	.content {
		position: absolute;
		top: 0;

		uni-button:after {
			border: transparent;
		}

		.top-bg {
			width: 750rpx;
			height: 400rpx;
			// background-image: url('http://www.img.ttblog.cn/car/header-bg.png');
			background-color: #3384FC;
			background-size: cover;
		}

		.main {
			transform: translateY(-170rpx);
			margin-top: -70rpx;
			padding: 0 20rpx;

			/deep/ .u-tabs__wrapper__nav__line {
				background-color: #fff !important;
				width: 100rpx !important;
				margin-left: -30rpx;
				margin-bottom: 6rpx;
			}

			.list {
				padding: 30rpx 30rpx;
				background-color: #fff;
				border-radius: 20rpx;
				margin-bottom: 30rpx;

				view {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
				}

				.top {
					.title {
						font-size: 27rpx;
						font-weight: bold;
					}

					.title-state {
						font-size: 24rpx;
						color: #FF4000;
					}

				}

				.line {
					border-bottom: 7rpx solid #f7f7f7;
					padding-top: 18rpx;
				}

				.name {
					font-size: 24rpx;
					margin-top: 18rpx;
					display: inline-block;

					image {
						width: 20rpx;
						height: 20rpx;
						margin-left: 15rpx;
					}
				}

				.name~text {
					font-size: 24rpx;
					margin-top: 18rpx;
				}

				.red {
					color: #FF4000;
				}

				.green {
					color: #21CA59;
					font-size: 30rpx !important;
				}

				.state {
					color: #053FFF;
					font-size: 22rpx;
					margin-left: 200rpx;
				}

				// 待使用
				view.verification {
					display: block;
					text-align: center;

					.title {
						font-weight: bold;
						font-size: 26rpx;
					}

					.text {
						font-size: 24rpx;
					}

					.image {
						margin: 20rpx auto 0;
						display: block;
						width: 160rpx;
						height: 160rpx;
					}
				}


			}



			.placeholder {
				height: 15.33vw;
			}

			/deep/ .u-button {
				width: 80%;
				background-color: #D9D9D9;
				color: #fff;
			}
		}

		.page-bottom {
			position: absolute;
			bottom: 0;
			width: 100%;
			background-color: #fff;
			padding: 20rpx 20rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			.left {
				image {
					width: 40rpx;
					height: 40rpx;
					vertical-align: middle;
				}

				text {
					font-size: 22rpx;
					font-weight: bold;
					margin-left: 10rpx;
				}
			}

			.right {
				display: flex;
				flex-direction: row;

				button {
					color: #fff;
					font-size: 24rpx;
					width: 200rpx;
					border-radius: 40rpx;
					border: 1rpx solid transparent !important;
					padding: 0;
				}

				.grey {
					background-color: #BFBFBF;
				}

				.blue {
					background-color: #3385FC;
				}
			}
		}
	}
</style>